<!--
 * @Author: 噜噜雯雯 2199987619@qq.com
 * @Date: 2025-06-25 14:47:24
 * @LastEditors: 噜噜雯雯 2199987619@qq.com
 * @LastEditTime: 2025-06-27 17:19:14
 * @FilePath: \linePatrol\vue-element-plus-admin\src\views\GIS\OneMap\Level.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <ElPopover placement="right" :width="300" trigger="click">
    <template #reference>
      <li class="input-item"><span>图层</span></li>
    </template>
    <ElRow :gutter="20">
      <ElCol :span="8">
        <div
          v-if="Ponit"
          class="input-item ep-bg-purple grid-content"
          @click="ChooseLevel(0, 'show')"
          ><Icon icon="material-symbols-light:ballot-outline" />设施</div
        >
        <div v-else class="input-item grid-content" @click="ChooseLevel(0, 'hide')"
          ><Icon icon="material-symbols-light:ballot-outline" />设施</div
        >
      </ElCol>
      <ElCol :span="8">
        <div
          v-if="Line"
          class="input-item ep-bg-purple grid-content"
          @click="ChooseLevel(1, 'show')"
          >管线</div
        >
        <div v-else class="input-item grid-content" @click="ChooseLevel(1, 'hide')">管线</div>
      </ElCol>
    </ElRow>
  </ElPopover>
</template>
<script setup lang="tsx">
import { ElCol, ElRow, ElPopover } from 'element-plus'
import { defineEmits, ref } from 'vue'
const emit = defineEmits(['changeMap'])
import { Icon } from '@/components/Icon'
const Ponit = ref(true)
const Line = ref(true)
const ChooseLevel = (type: number, state: string) => {
  emit('changeMap', type, state)
  if (state == 'show') {
    if (type == 0) {
      Ponit.value = false
    } else {
      Line.value = false
    }
  } else {
    if (type == 0) {
      Ponit.value = true
    } else {
      Line.value = true
    }
  }
}
</script>
<style scoped lang="less">
:deep(.ep-bg-purple) {
  background: rgb(20, 161, 242) !important;
  color: white !important;
}
:deep(.grid-content) {
  border-radius: 4px;
  min-height: 50px;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
  //   background: rgb(20, 161, 242);
}
:deep(.ep-bg-purple:hover) {
  cursor: pointer;
}
.input-item {
  width: 50px;
  height: 50px;
  margin: 15px 0;
  background: #fff;
  border-radius: 5px;
  color: #666;
  box-sizing: border-box;
  padding: 5px 10px;
  font-size: 13px;
  list-style: none;
  cursor: pointer;
  text-align: center;
  line-height: 30px;
  display: flex;
  // flex-wrap: wrap;
  align-items: center;
  font-style: normal;
  span {
    display: inline-block;
    // width: 15px;
    // height: 15px;
  }
}
.input-item:hover {
  background: #409eff;
  color: #fff;
}
</style>
